<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'

import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
const editorId = 'reportEditor'
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage:{
      server: '/api/upload',
      customInsert(res, insertFn) {
        // res 即服务端的返回结果
        console.log(res);
        // 从 res 中找到 url alt href ，然后插图图片
          // insertFn(url, alt, href)
      },
    },
  }
}


</script>

<template>
  <div class="reprot-edit-wrap flex">
    <div class="box-shadow bg-white report-edit-box">
      <!-- 工具栏 -->
      <Toolbar :editorId="editorId" :mode="mode" style="border-bottom: 1px solid #ccc" />
      <!-- 编辑器 -->
      <Editor
        :editorId="editorId"
        :mode="mode"
        :defaultConfig="editorConfig"
        :defaultContent="getDefaultContent"
        @onCreated="handleCreated"
        @onChange="handleChange"
        @onDestroyed="handleDestroyed"
        @onFocus="handleFocus"
        @onBlur="handleBlur"
        @customAlert="customAlert"
        @customPaste="customPaste"
        style="height:auto"
      />
    </div>
    <div class="right-wrap">
      <div class="flex" style="justify-content: flex-end;">
        <el-button type="primary" plain>预览</el-button>
        <el-button type="primary" plain>存草稿</el-button>
        <el-button type="primary">发布</el-button>
      </div>
      <div class="box-shadow select-chart-box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="User" name="first">User</el-tab-pane>
          <el-tab-pane label="Config" name="second">Config</el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.report-edit-box {
  flex: 1;
  border: 1px solid #ededed;
  border-radius: 8px;
  :deep(.w-e-toolbar) {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  :deep(.w-e-bar-divider){
    display: none;
  }
  :deep(.w-e-text-container) {
    border: none !important;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    min-height: 80vh !important;
  }
}
.right-wrap{
  margin-left: 30px;
  width: 400px;
  flex-shrink: 0;
  .select-chart-box{
    background-color: #fff;
    margin-top: 30px;
    padding: 30px;
    height: 75vh;
    overflow-y: scroll;
  }
}
</style>
